import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects

// 美化版技能树视图 - 针对6岁男孩优化
Rectangle {
    id: skillTreePage
    
    // 天空渐变背景
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#87CEEB" }  // 天空蓝
        GradientStop { position: 0.5; color: "#B0E2FF" }
        GradientStop { position: 1.0; color: "#E0F6FF" }  // 浅蓝
    }
    
    // 云朵背景（可选）
    Repeater {
        model: 5
        Rectangle {
            width: 150 + Math.random() * 100
            height: 60 + Math.random() * 40
            radius: height / 2
            color: "#FFFFFF"
            opacity: 0.3
            x: Math.random() * skillTreePage.width
            y: Math.random() * 300
            
            // 云朵漂浮动画
            SequentialAnimation on x {
                loops: Animation.Infinite
                NumberAnimation {
                    from: -200
                    to: skillTreePage.width + 200
                    duration: 30000 + Math.random() * 20000
                }
            }
        }
    }
    
    // 删除模式状态
    property bool deleteMode: false
    
    Component.onCompleted: {
        console.log("Beautiful SkillTreeView loaded!")
        // ... 保持原有的初始化逻辑
    }

    // 顶部控制栏 - 美化版
    Rectangle {
        id: controlBar
        width: parent.width
        height: 100
        
        // 彩虹渐变
        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: "#FF6B9D" }
            GradientStop { position: 0.5; color: "#FFA07A" }
            GradientStop { position: 1.0; color: "#FFD700" }
        }
        
        // 阴影效果
        layer.enabled: true
        layer.effect: MultiEffect {
            shadowEnabled: true
            shadowColor: "#80000000"
            shadowVerticalOffset: 4
            shadowBlur: 0.3
        }
        
        RowLayout {
            anchors.fill: parent
            anchors.margins: 15
            spacing: 15

            // 技能树切换下拉框 - 美化版
            Item {
                Layout.preferredWidth: 280
                Layout.preferredHeight: 60
                
                ComboBox {
                    id: treeSelector
                    anchors.fill: parent
                    font.pixelSize: 20
                    font.bold: true
                    font.family: "Microsoft YaHei"
                    
                    model: skillModel.getSkillTrees()
                    textRole: "name"
                    valueRole: "id"

                    background: Rectangle {
                        color: "white"
                        radius: 30
                        border.color: "#FF69B4"
                        border.width: 3
                        
                        // 发光效果
                        layer.enabled: true
                        layer.effect: MultiEffect {
                            shadowEnabled: true
                            shadowColor: "#40FF69B4"
                            shadowBlur: 0.5
                        }
                        
                        // 左键单击
                        MouseArea {
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            
                            property bool isLongPress: false
                            
                            Timer {
                                id: longPressTimer
                                interval: 800
                                running: false
                                repeat: false
                                onTriggered: {
                                    if (treeSelector.model.length > 0 && treeSelector.currentIndex >= 0) {
                                        var currentTree = treeSelector.model[treeSelector.currentIndex]
                                        showEditTreeDialog(currentTree.id, currentTree.name)
                                        parent.isLongPress = true
                                    }
                                }
                            }
                            
                            onPressed: {
                                isLongPress = false
                                longPressTimer.start()
                            }
                            
                            onReleased: {
                                longPressTimer.stop()
                            }
                            
                            onClicked: {
                                if (!isLongPress) {
                                    treeSelector.popup.open()
                                }
                            }
                        }
                        
                        // 右键重命名
                        MouseArea {
                            anchors.fill: parent
                            acceptedButtons: Qt.RightButton
                            
                            onClicked: {
                                if (mouse.button === Qt.RightButton) {
                                    if (treeSelector.model.length > 0 && treeSelector.currentIndex >= 0) {
                                        var currentTree = treeSelector.model[treeSelector.currentIndex]
                                        showEditTreeDialog(currentTree.id, currentTree.name)
                                    }
                                }
                            }
                        }
                    }

                    onActivated: {
                        skillModel.currentTreeId = model[currentIndex].id
                    }

                    Component.onCompleted: {
                        if (model.length > 0) {
                            treeSelector.currentIndex = 0;
                            skillModel.currentTreeId = model[0].id;
                        }
                    }

                    Connections {
                        target: skillModel
                        onCurrentTreeIdChanged: {
                            for(var i = 0; i < treeSelector.model.length; i++) {
                                if (treeSelector.model[i].id === skillModel.currentTreeId) {
                                    treeSelector.currentIndex = i;
                                    break;
                                }
                            }
                        }
                    }
                }
            }

            // 美化的按钮 - 新建技能树
            Button {
                Layout.preferredHeight: 60
                font.pixelSize: 18
                font.bold: true
                
                background: Rectangle {
                    radius: 30
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: parent.pressed ? "#FF1493" : "#FF69B4" }
                        GradientStop { position: 1.0; color: parent.pressed ? "#FF69B4" : "#FFB6C1" }
                    }
                    
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowColor: "#80FF69B4"
                        shadowVerticalOffset: 4
                        shadowBlur: 0.4
                    }
                }
                
                contentItem: Row {
                    spacing: 8
                    anchors.centerIn: parent
                    
                    Text {
                        text: "✨"
                        font.pixelSize: 24
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    
                    Text {
                        text: "新建技能树"
                        color: "white"
                        font: parent.parent.font
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                
                onClicked: {
                    var newId = skillModel.createNewSkillTree("新建技能树 " + (treeSelector.model.length + 1))
                    treeSelector.model = skillModel.getSkillTrees()
                    skillModel.currentTreeId = newId
                }
            }
            
            // 删除模式按钮
            Button {
                Layout.preferredHeight: 60
                font.pixelSize: 18
                font.bold: true
                
                background: Rectangle {
                    radius: 30
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: parent.pressed ? "#FF4444" : "#FF6666" }
                        GradientStop { position: 1.0; color: parent.pressed ? "#FF6666" : "#FF8888" }
                    }
                    
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowColor: "#80FF6666"
                        shadowVerticalOffset: 4
                        shadowBlur: 0.4
                    }
                }
                
                contentItem: Row {
                    spacing: 8
                    anchors.centerIn: parent
                    
                    Text {
                        text: deleteMode ? "✅" : "🗑️"
                        font.pixelSize: 24
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    
                    Text {
                        text: deleteMode ? "完成删除" : "删除节点"
                        color: "white"
                        font: parent.parent.font
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                
                onClicked: {
                    deleteMode = !deleteMode
                    if (!deleteMode) {
                        stopAllShaking()
                    }
                }
            }
            
            // 删除技能树按钮
            Button {
                Layout.preferredHeight: 60
                font.pixelSize: 18
                font.bold: true
                
                background: Rectangle {
                    radius: 30
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: parent.pressed ? "#CC0000" : "#FF3333" }
                        GradientStop { position: 1.0; color: parent.pressed ? "#FF3333" : "#FF5555" }
                    }
                    
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowColor: "#80FF3333"
                        shadowVerticalOffset: 4
                        shadowBlur: 0.4
                    }
                }
                
                contentItem: Row {
                    spacing: 8
                    anchors.centerIn: parent
                    
                    Text {
                        text: "🗑️"
                        font.pixelSize: 24
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    
                    Text {
                        text: "删除技能树"
                        color: "white"
                        font: parent.parent.font
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                
                onClicked: {
                    if (treeSelector.model.length > 1) {
                        var currentTreeName = treeSelector.model[treeSelector.currentIndex].name
                        showDeleteTreeConfirmDialog(skillModel.currentTreeId, currentTreeName)
                    } else {
                        showSingleTreeWarningDialog()
                    }
                }
            }
        }
    }

    // ... 这里需要保留原有的Flickable、Canvas和所有对话框代码
    // 由于文件太长，这只是一个示例框架
    // 实际使用时，需要将原SkillTreeView.qml的内容复制过来，只修改美化部分
    
    // 示例：美化的完成特效
    Item {
        id: celebrationEffect
        anchors.fill: parent
        visible: false
        z: 1000
        
        // 点赞动画
        Text {
            id: thumbUpEmoji
            text: "👍"
            font.pixelSize: 150
            anchors.centerIn: parent
            scale: 0
            rotation: -45
            
            SequentialAnimation {
                id: thumbUpAnimation
                
                ParallelAnimation {
                    NumberAnimation {
                        target: thumbUpEmoji
                        property: "scale"
                        from: 0
                        to: 1.5
                        duration: 600
                        easing.type: Easing.OutElastic
                    }
                    
                    NumberAnimation {
                        target: thumbUpEmoji
                        property: "rotation"
                        from: -45
                        to: 0
                        duration: 600
                        easing.type: Easing.OutBack
                    }
                }
                
                PauseAnimation { duration: 800 }
                
                ParallelAnimation {
                    NumberAnimation {
                        target: thumbUpEmoji
                        property: "scale"
                        to: 0
                        duration: 300
                    }
                    
                    NumberAnimation {
                        target: thumbUpEmoji
                        property: "opacity"
                        to: 0
                        duration: 300
                    }
                }
                
                onFinished: {
                    celebrationEffect.visible = false
                    thumbUpEmoji.scale = 0
                    thumbUpEmoji.opacity = 1
                }
            }
        }
        
        function show() {
            visible = true
            thumbUpAnimation.start()
        }
    }
    
    // 烟花特效
    Repeater {
        id: fireworksRepeater
        model: 0
        
        Item {
            id: firework
            x: Math.random() * skillTreePage.width
            y: skillTreePage.height
            
            property real targetY: Math.random() * skillTreePage.height * 0.5
            property color fireworkColor: Qt.hsla(Math.random(), 1, 0.5, 1)
            
            Rectangle {
                width: 10
                height: 10
                radius: 5
                color: firework.fireworkColor
                anchors.centerIn: parent
            }
            
            SequentialAnimation {
                running: true
                
                NumberAnimation {
                    target: firework
                    property: "y"
                    to: firework.targetY
                    duration: 1000
                    easing.type: Easing.OutQuad
                }
                
                ScriptAction {
                    script: {
                        // 爆炸效果
                        for (var i = 0; i < 20; i++) {
                            createSpark(firework.x, firework.y, firework.fireworkColor)
                        }
                    }
                }
            }
        }
    }
    
    function createSpark(x, y, color) {
        // 创建火花粒子的逻辑
    }
    
    function showFireworks() {
        fireworksRepeater.model = 5
        // 3秒后清除
        Qt.callLater(function() {
            fireworksRepeater.model = 0
        }, 3000)
    }
    
    // 保留原有的所有函数和对话框...
    function showEditTreeDialog(treeId, treeName) {
        editTreeDialog.treeId = treeId
        editTreeDialog.treeName = treeName
        editTreeDialog.open()
    }
    
    function showDeleteTreeConfirmDialog(treeId, treeName) {
        deleteTreeConfirmDialog.treeId = treeId
        deleteTreeConfirmDialog.treeName = treeName
        deleteTreeConfirmDialog.open()
    }
    
    function showSingleTreeWarningDialog() {
        singleTreeWarningDialog.open()
    }
    
    function stopAllShaking() {
        // 停止抖动
    }
    
    // 对话框定义...
    Dialog {
        id: editTreeDialog
        property string treeId: ""
        property string treeName: ""
        // ... 对话框内容
    }
    
    Dialog {
        id: deleteTreeConfirmDialog
        property string treeId: ""
        property string treeName: ""
        // ... 对话框内容
    }
    
    Dialog {
        id: singleTreeWarningDialog
        // ... 对话框内容
    }
}

